<!--
 * @Descripttion: 今日劳动力作业概况
 * @version: 
 * @Author: ada.wu
 * @Date: 2025-06-25 23:48:14
 * @LastEditors: ada.wu
 * @LastEditTime: 2025-07-08 09:01:07
-->
<!-- css/amap.css -->

<head>
    <link rel="stylesheet" href="/assets/css/amap.css" media="all">
</head>
<style>
    .layui-card-header {
        border-bottom: none;
    }

    .layui-card.selected {
        background-color: var(--primary-hover-color) !important;
    }

    .layui-card.selected.solid::after {
        border-color: var(--primary-color) !important;
        ;

    }

    #grid-card {
        height: calc(100vh - 425px);
    }

    .total-map {
        height: calc(100vh - 355px);
    }

    .tab-cont {
        position: relative
    }

    .tab-time {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
        width: 260px;
    }
</style>
<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">
        <div class="layuimini-title layui-font-20 items-center">
            <i class="layui-icon layui-icon-return anticon mr-1" id="backBtn"></i>
            调休额度详情

        </div>




        <div class="section">
            <div class="layui-row mb-5">
                <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 mt-3">
                    <label class="layui-font-gray">员工姓名：</label>
                    <span class="layui-font-black">刘永全</span>
                </div>
                <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 mt-3">
                    <label class="layui-font-gray">岗位、职位：</label>
                    <span class="layui-font-black">安全员、巡查/安全</span>
                </div>
                <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 mt-3">
                    <label class="layui-font-gray">所属网格：</label>
                    <span class="layui-font-black">守点车辆秩序整治</span>
                </div>
                <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 mt-3">
                    <label class="layui-font-gray">所属组织：</label>
                    <span class="layui-font-black">北京鑫鑫佳美保洁服务有限公司</span>
                </div>
                <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 mt-3">
                    <label class="layui-font-gray">是否允许调休：</label>
                    <span class="layui-font-black">否</span>
                </div>
                <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 mt-3">
                    <label class="layui-font-gray">调休有效期：</label>
                    <span class="layui-font-black">2025-07-08 08:43:45</span>
                </div>
            </div>

            <div class="title-row">
                <div class="title-left">
                    <div class="title-info">
                        <div class="title-line"></div>
                        <span class="title-text">本月调休数据</span>
                    </div>
                </div>
                <div class="title-right">
                </div>
            </div>


            <div class="layui-row mb-5">
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 mt-3">
                    <label class="layui-font-gray">当前余额：</label>
                    <span class="layui-font-black">-</span>
                </div>
                <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 mt-3">
                    <label class="layui-font-gray">期初余额：</label>
                    <span class="layui-font-black">-</span>
                </div>

                <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 mt-3">
                    <label class="layui-font-gray">本月产生：</label>
                    <span class="layui-font-black">-</span>
                </div>
                <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 mt-3">
                    <label class="layui-font-gray">本月使用：</label>
                    <span class="layui-font-black">-</span>
                </div>
                <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 mt-3">
                    <label class="layui-font-gray">即将失效：</label>
                    <span class="layui-font-black">-</span>
                </div>
                <div class="layui-col-xs12 layui-col-sm6 layui-col-md4 mt-3">
                    <label class="layui-font-gray">失效后剩余：</label>
                    <span class="layui-font-black">-</span>
                </div>
            </div>


            <div class="tab-cont">

                <div class="layui-tabs layui-tabs-card noborder" id="planTabs">
                    <ul class="layui-tabs-header">
                        <li lay-id="1">本月加班、调休</li>
                        <li lay-id="2">余额详情</li>
                    </ul>
                </div>
                <div class="flex-center tab-time">
                    <button class="layui-btn layui-btn-primary layui-btn-sm  mr-3" id="prev-month" title="上个月">
                        <i class="layui-icon layui-icon-left"></i>
                    </button>
                    <input class="layui-input layui-date mr-3" type="text" id="current_month" placeholder="选择日期">
                    <button class="layui-btn layui-btn-primary layui-btn-sm mr-3" id="next-month" title="下个月">
                        <i class="layui-icon layui-icon-right"></i>
                    </button>
                    <button class="layui-btn layui-btn-primary layui-btn-sm mr-3" id="today" title="返回今天">
                        <i class="layui-icon layui-icon-refresh"></i>
                    </button>
                </div>
            </div>




            <div class="table-stripe">
                <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
            </div>

        </div>
    </div>
</div>

<script>



    layui.use(['form', 'miniPage', 'miniAMap'], function () {
        var $ = layui.$,
            element = layui.element,
            layer = layui.layer,
            util = layui.util,
            table = layui.table,
            tabs = layui.tabs,
            laydate = layui.laydate,
            miniAMap = layui.miniAMap;



        // 获取存储的数据
        var appData = layui.sessionData('HOLIDAY_BALANCE_PARAMS')
        let { dataDto = null, pageType = '' } = appData
        if (dataDto) {
            dataDto = JSON.parse(dataDto)
        }
        console.log('pageType==', pageType)
        $("#pageTitle").html(pageType == 'edit' ? '编辑出勤范围' : '新增出勤范围')
        console.log('子页面的值===', pageType, dataDto)




        /******************** 事件 start ********************/
        // 地图页面返回事件
        $('#backBtn').on('click', function () {
            miniPage.backPageCreate()
        });
        /******************** 事件 end ********************/

        tabs.render({
            elem: '#planTabs',
            index: 0// 默认选中
        });


        // planTabs 切换事件
        tabs.on('afterChange(planTabs)', function (data) {
            var tabIndex = data.index;
        });

        let currentDate = new Date();
        let currentYear = currentDate.getFullYear();
        let currentMonth = String(currentDate.getMonth() + 1).padStart(2, '0');// 月份从 0 开始 补零


        // 切换上个月
        document.getElementById('prev-month').addEventListener('click', function () {
            currentMonth--;
            if (currentMonth < 1) {
                currentMonth = 12;
                currentYear--;
            }
            renderCalendar(currentYear, currentMonth);
        });

        // 切换下个月
        document.getElementById('next-month').addEventListener('click', function () {
            currentMonth++;
            if (currentMonth > 12) {
                currentMonth = 1;
                currentYear++;
            }
            renderCalendar(currentYear, currentMonth);
        });

        // 返回今天
        document.getElementById('today').addEventListener('click', function () {
            currentYear = new Date().getFullYear();
            currentMonth = today.getMonth() + 1;



            renderCalendar(currentYear, currentMonth);
        });
        //日期组件
        laydate.render({
            elem: '#current_month',
            type: 'month',
            done: function (value, date, endDate) {
                const { year, month } = date
                currentYear = year
                currentMonth = month
                renderCalendar(year, month);
            }
        });
        function renderCalendar(year, month) {
            month = String(month).padStart(2, '0');
            $('#current_month').val(`${year}-${month}`);

        }
         // 初始化渲染
        renderCalendar(currentYear, currentMonth);
        table.render({
            elem: '#currentTableId',
            url: 'api/table.json',
            cols: [[
                { field: 'name', minWidth: 110, title: '类型' },
                { field: 'name', minWidth: 120, title: '时间' },
                { field: 'name', minWidth: 120, title: '时长（h）' },
            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 10,
            page: true,
            skin: 'grid',
            size: 'lg'
        });



    })
</script>